﻿@page "/cards"

<h3>Card 卡片</h3>

<h4>将信息聚合在卡片容器中展示</h4>

<Block Title="Card 卡片组件" Introduction="Card简单示例">
    <Card>
        <CardBody>
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </CardBody>
    </Card>
</Block>

<Block Title="Header 和 Footer" Introduction="通过添加 CardHeader 与 CardFooter 元素即可展示相关内容">
    <Card>
        <CardHeader>
            Featured
        </CardHeader>
        <CardBody>
            <h5 class="card-title">Special title treatment</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </CardBody>
        <CardFooter>
            2 days ago
        </CardFooter>
    </Card>
</Block>

<Block Title="内容居中" Introduction="通过设置，<code>IsCenter=true</code> 使内容居中">
    <Card IsCenter="true">
        <CardHeader>
            Featured
        </CardHeader>
        <CardBody>
            <h5 class="card-title">Special title treatment</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </CardBody>
        <CardFooter>
            2 days ago
        </CardFooter>
    </Card>
</Block>

<Block Title="带有边框颜色的卡片" Introduction="通过设置，<code>Color</code> 使border和Body具有相应的颜色">
    <div class="row g-3">
        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
            <Card Color="Color.Primary" IsCenter="true">
                <CardHeader>
                    Header
                </CardHeader>
                <CardBody>
                    <h5 class="card-title">Primary card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </CardBody>
            </Card>
        </div>
        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
            <Card Color="Color.Secondary" IsCenter="true">
                <CardHeader>
                    Header
                </CardHeader>
                <CardBody>
                    <h5 class="card-title">Success card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </CardBody>
            </Card>
        </div>
        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
            <Card Color="Color.Success" IsCenter="true">
                <CardHeader>
                    Header
                </CardHeader>
                <CardBody>
                    <h5 class="card-title">Secondary card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </CardBody>
            </Card>
        </div>
        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
            <Card Color="Color.Warning" IsCenter="true">
                <CardHeader>
                    Header
                </CardHeader>
                <CardBody>
                    <h5 class="card-title">Warning card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </CardBody>
            </Card>
        </div>
        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
            <Card Color="Color.Danger" IsCenter="true">
                <CardHeader>
                    Header
                </CardHeader>
                <CardBody>
                    <h5 class="card-title">Danger card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </CardBody>
            </Card>
        </div>
        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
            <Card Color="Color.Info" IsCenter="true">
                <CardHeader>
                    Header
                </CardHeader>
                <CardBody>
                    <h5 class="card-title">Info card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </CardBody>
            </Card>
        </div>
        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
            <Card Color="Color.Dark" IsCenter="true">
                <CardHeader>
                    Header
                </CardHeader>
                <CardBody>
                    <h5 class="card-title">Dark card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </CardBody>
            </Card>
        </div>
    </div>
</Block>

<AttributeTable Items="GetAttributes()" />


